<template>
    <div id="home">
      <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
      <home-swiper :banners="banners"/><!--533.3-->
      <recommend-view :recommends="recommends"/><!--542.3-->
      <feature-view/>
      <tab-control class="tab-control" :titles="['流行','新款','精选']"/>

      <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
        <li>列表7</li>
        <li>列表8</li>
        <li>列表9</li>
        <li>列表10</li>
        <li>列表11</li>
        <li>列表12</li>
        <li>列表13</li>
        <li>列表14</li>
        <li>列表15</li>
        <li>列表16</li>
        <li>列表17</li>
        <li>列表18</li>
        <li>列表19</li>
        <li>列表20</li>
        <li>列表21</li>
        <li>列表22</li>
        <li>列表23</li>
        <li>列表24</li>
        <li>列表25</li>
        <li>列表26</li>
        <li>列表27</li>
        <li>列表28</li>
        <li>列表29</li>
        <li>列表30</li>
        <li>列表30</li>
        <li>列表30</li>
        <li>列表30</li>
        <li>列表30</li>
        <li>列表30</li>
        <li>列表30</li>
      </ul>
    </div>
</template>

<script>
  import HomeSwiper from "./childComps/HomeSwiper";//533.1
  import RecommendView from "./childComps/RecommendView";//542.1
  import FeatureView from './childComps/FeatureView';

  import NavBar from "components/common/navbar/NavBar";
  import TabControl from "@/components/content/tabControl/TabControl";//562.1

  import {getHomeMultidata} from "../../network/home";//524.1

  export default {
    name: "Home",
    components: {
      HomeSwiper,//533.2
      RecommendView,//542.2
      FeatureView,
      NavBar,
      TabControl,//562.2
    },
    //524.3 设置变量保存获得的数据
    data() {
      return {
        // result: null
        banners: [],
        recommends: [],

      }
    },
    //524.2 组件创建好之后马上发送网络请求
    created() {
      //1.请求多个数据
      getHomeMultidata().then(res => {
        console.log(res);
        //524.4 this在箭头函数中会往上找作用域，往上created的this是组件对象，所以this.result拿到的就是data里面的result
        // this.result = res;
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      })
    }
  }
</script>

<style scoped>
  #home {
    padding-top: 44px;
  }
  .home-nav {
    background-color: var(--color-tint);
    color: #fff;

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
  .tab-control {
    position: sticky;
    top: 44px;

  }
</style>
